<template>
  <div class="g-flex-0 g-m-r-16 g-h-16">
    <span v-if="title">{{ $t(title) }}：</span>
    <el-tooltip
      v-for="(item, index) in buttons"
      :key="index"
      :hide-after="0"
      placement="bottom"
      popper-class="menu-tooltips"
      :show-arrow="false"
      :content="item.tips"
    >
      <img
        class="g-m-r-10 g-pointer"
        :class="{ 'g-disabled': item.disabled, 'm-disabled': item.disabled }"
        :src="item.icon"
        @click="!item.disabled && handleTooltipClick(item)"
      />
    </el-tooltip>
  </div>
</template>
<script lang="ts" setup>
import { ModelMergeInfo } from "@/constants/types";
import { inject } from "vue";
import { projectService } from "../../service";
import { SelectedNode } from "./component/logic";
import { TypeContextMenuItem } from "./config";

const targetProjectId = inject("targetProjectId") as string;
const sourceProjectId = inject("sourceProjectId") as string;
const props = defineProps<{
  instanceId: string;
  ownerId: any;
  title: string;
  buttons: TypeContextMenuItem[];
  currentKey: string;
  selectedNodes: SelectedNode[];
}>();
const emits = defineEmits<{
  (event: "update:property", value: string[]): void;
}>();

async function handleTooltipClick(item: TypeContextMenuItem) {
  let resData;
  // 当选中了属性栏的属性时，toolbar就是对属性的操作，否则才是对模型的操作
  if (props.currentKey) {
    const mergeInfo = {
      instanceId: props.instanceId
    };
    resData = await projectService.projectMergeUpdateProperty(
      targetProjectId,
      sourceProjectId,
      props.currentKey,
      item.key,
      [mergeInfo],
      null
    );
  } else {
    const mergeInfo = props.selectedNodes.map(it => {
      const param = {
        instanceId: it.id,
        ownerId: it.ownerId
      } as ModelMergeInfo;
      return param;
    });
    resData = await projectService.projectMergeUpdateSingle(targetProjectId, sourceProjectId, item.key, mergeInfo);
  }
  emits("update:property", resData.data.modifyModel);
}
</script>
<style lang="scss">
.m-disabled {
  filter: contrast(24%) !important;
}
</style>
